<template>
  <div class="updateDynamicsStatistics h100">
    <div class="updateDynamicsStatisticsHead">
      <h3 class="withLine title14">{{ $t('cljqdt') }}</h3>
      <div class="updateDynamicsStatisticsHeadSearch">
      </div>
    </div>
    <div class="chartBox">
      <loading-state :echartShowStatus="echartShowStatus">
        <div ref="chartDom" class="h100"></div>
      </loading-state>
    </div>
  </div>
</template>

<script>
import statisticsApi from '@/api/modules/statistics'
import { sjdttjChartOption } from '../config/chart'
import lodash from 'lodash'
export default {
  components: {
  },
  data () {
    const _this = this
    return {
      chart: null,
      compareOptions: [{
        id: '11',
        name: _this.$t('jccgs')
      }, {
        id: '21',
        name: _this.$t('xzcgs')
      }, {
        id: '100',
        name: _this.$t('sjcgs')
      }],
      queryParams: {
        year: 1
      },
      loading: true,
      echartShowStatus: -1,
      bindedEvent: false,
      chartOption: lodash.cloneDeep(sjdttjChartOption)
    }
  },
  mounted () {
    this.loadData()
  },
  methods: {
    changeYear (val) {
      this.queryParams.year = val
      this.loadData()
    },
    loadData () {
      this.clearChart()
      this.loading = true
      const params = {
        taskType: 1
      }
      this.echartShowStatus = 1
      statisticsApi.getCountVehicleReportData(params).then(res => {
        const { data } = res
        if (!data) {
          this.echartShowStatus = 3
          return
        }
        this.echartShowStatus = 2
        const chartOptionData = this.changeOptionData(data)
        this.$nextTick(() => {
          this.initChart()
          this.setOption(chartOptionData)
          this.bindEvent()
        })
      }).catch(() => {
        this.echartShowStatus = 3
      })
    },
    initChart () {
      if (this.chart) {
        return
      }
      this.chart = this.$echarts.init(this.$refs.chartDom)
    },
    setOption (option) {
      if (!this.chart) {
        return
      }
      this.chart.setOption(option)
    },
    changeOptionData (data) {
      const series = []
      Object.keys(data.yaxisData).forEach((key) => {
        const name = this.getQueryKeyName(key)
        if (!name) {
          console.error('返回的' + key + '在前端没有对应的名称')
          return
        }
        const seriesItem = {
          name,
          type: 'line',
          symbol: 'none',
          smooth: true,
          data: data.yaxisData[key]
        }
        series.push(seriesItem)
      })

      const optionData = {
        ...this.chartOption,
        xAxis: [
          {
            type: 'category',
            data: data.xaxisData,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        series
      }
      optionData.legend.data = [this.$t('jccgs'), this.$t('xzcgs'), this.$t('sjcgs')]
      return optionData
    },
    getQueryKeyName (key) {
      const obj = this.compareOptions.find(item => item.id === key)
      if (obj) {
        return obj.name
      }
      return ''
    },
    bindEvent () {
      if (this.bindedEvent) {
        return
      }
      window.addEventListener('resize', this.resize)
      this.bindedEvent = true
    },
    resize () {
      this.chart && this.chart.resize()
    },
    clearChart () {
      this.chart && this.chart.clear()
    }
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.resize)
  }
}
</script>
<style scoped lang="less">
.updateDynamicsStatistics {
  display: flex;
  flex-direction: column;
  .chartBox {
    flex: 1 0 0;
    position: relative;
    margin-top: 24px;
  }
  .updateDynamicsStatisticsHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .updateDynamicsStatisticsHeadSearch {
    flex: none;
    > span {
      font-weight: bold;
    }
  }
}
</style>
